import React, { Component } from "react";

function high(Com) {
    return class NewCom extends Component {
        state = {
            pageInfo: {
                pageSize: 10,
                pageNum: 1
            }
        }
        fn = () => {
            console.log('我是公共的方法')
        }
        render() {
            const { pageInfo } = this.state
            return (
                <div className='high'>
                    <Com pageInfo = { pageInfo } fn = { this.fn }/>
                </div>
            )
        }
        // componentDidMount() {
        //     this.fn()
        // }
    }
}

function high2(Com, url) {
    return class NewCom extends Component {
        state = {
            list: [],
            total: 0
        }
        pageSizeChange = (page, pageSize) => {
            console.log(page, pageSize)
        }
        render() {
            const { total } = this.state
            return <div>
                <Com total = { total } pageSizeChange = { this.pageSizeChange }/>
            </div>
        }
        
        componentDidMount() {
            axios.get(url).then(res => {
                this.setState({
                    total: res.data.total
                })
            })
        }
    }
}

function drag(Com) {
    return class NewCom extends Component {
        state = {
            left: 0,
            top: 0
        }
        render() {
            const { left, top } = this.state
            return <div style={{
                left,
                top
            }} className="drag" id="box">
                <Com/>
            </div>
        }
        mouserMove = (ev) => {
            const left = ev.clientX
            const top = ev.clientY
            this.setState({
                left,
                top
            })
        }
        componentDidMount() {
            let box = document.getElementById('box')
            //    按下
            box.addEventListener('mousedown', () => {
                console.log('我按下了')
                //    移动
                document.addEventListener('mousemove', this.mouserMove)
                // 抬起
                document.addEventListener('mouseup', () => {
                    console.log('我抬起了')
                    document.removeEventListener('mousemove', this.mouserMove)
                })
            })
        }
    }
}

export {
    high,
    high2,
    drag
}